<template>
  <div v-loading="fileLoading" class="bg-white overflow-hidden pb-20">
    <div class="form-title">
      {{ themeName == "unicorn" ? "独角兽企业" : "瞪羚企业" }}附件上传
    </div>

    <div v-if="themeName == 'unicorn'">
      <div
        v-if="dictItem(0).dictLabel"
        :class="['upload-item py-4', unicornRequiredErr(0)]"
      >
        <div class="py-2">
          <span v-show="unicornRequiredDot(0)" class="text-red-500"> * </span>
          {{ dictItem(0).dictLabel }}
        </div>
        <SelfFileUpload
          :value="unicornFileList0"
          :fileSize="40"
          :limit="30"
          :isShowTip="true"
          :fileType="[
            'doc',
            'xls',
            'ppt',
            'txt',
            'pdf',
            'jpg',
            'jpeg',
            'png',
            'rar',
            'zip',
          ]"
          @input="getUploadFile0"
        />
      </div>

      <div
        v-if="dictItem(1).dictLabel"
        :class="['upload-item py-4', unicornRequiredErr(1)]"
      >
        <div class="py-2">
          <span v-show="unicornRequiredDot(1)" class="text-red-500"> * </span>
          {{ dictItem(1).dictLabel }}
        </div>
        <SelfFileUpload
          :value="unicornFileList1"
          :fileSize="40"
          :limit="30"
          :isShowTip="true"
          @input="getUploadFile1"
        />
      </div>

      <div
        v-if="dictItem(2).dictLabel"
        :class="['upload-item py-4', unicornRequiredErr(2)]"
      >
        <div class="py-2">
          <span v-show="unicornRequiredDot(2)" class="text-red-500"> * </span>
          {{ dictItem(2).dictLabel }}
        </div>
        <SelfFileUpload
          :value="unicornFileList2"
          :fileSize="40"
          :limit="30"
          :isShowTip="true"
          @input="getUploadFile2"
        />
      </div>

      <div
        v-if="dictItem(3).dictLabel"
        :class="['upload-item py-4', unicornRequiredErr(3)]"
      >
        <div class="py-2">
          <span v-show="unicornRequiredDot(3)" class="text-red-500"> * </span>
          {{ dictItem(3).dictLabel }}
        </div>
        <SelfFileUpload
          :value="unicornFileList3"
          :fileSize="40"
          :limit="30"
          :isShowTip="true"
          @input="getUploadFile3"
        />
      </div>

      <div
        v-if="dictItem(4).dictLabel"
        :class="['upload-item py-4', unicornRequiredErr(4)]"
      >
        <div class="py-2">
          <span v-show="unicornRequiredDot(4)" class="text-red-500"> * </span>
          {{ dictItem(4).dictLabel }}
          <span class="text-blue-500 alink cursor-pointer">
            <a :href="modelFile.url"> ( 点击下载模板文件 ) </a>
          </span>
        </div>
        <SelfFileUpload
          :value="unicornFileList4"
          :fileSize="40"
          :limit="30"
          :isShowTip="true"
          @input="getUploadFile4"
        />
      </div>

      <div
        v-if="dictItem(6).dictLabel"
        :class="['upload-item py-4', unicornRequiredErr(6)]"
      >
        <div class="py-2">
          <span v-show="unicornRequiredDot(6)" class="text-red-500"> * </span>
          <span>
            {{ dictItem(6).dictLabel }}
          </span>
        </div>
        <ImageUpload
          :value="unicornFileList6"
          :limit="3"
          :fileSize="5"
          :isShowTip="true"
          @input="getUploadFile6"
        />
      </div>

      <div
        v-if="dictItem(5).dictLabel"
        :class="['upload-item py-4', unicornRequiredErr(5)]"
      >
        <div class="py-2">
          <span v-show="unicornRequiredDot(5)" class="text-red-500"> * </span>
          {{ dictItem(5).dictLabel }}
        </div>
        <SelfFileUpload
          :value="unicornFileList5"
          :fileSize="40"
          :limit="30"
          @input="getUploadFile5"
        />
      </div>

      <!-- <div
        v-if="dictItem(7).dictLabel"
        :class="['upload-item py-4', unicornRequiredErr(7)]"
      >
        <div class="py-2">
          <span v-show="unicornRequiredDot(7)" class="text-red-500"> * </span>
          {{ dictItem(7).dictLabel }}
        </div>
        <SelfFileUpload
          :value="unicornFileList8"
          :fileSize="40"
          :limit="30"
          @input="getUploadFile8"
        />
      </div> -->
    </div>

    <div v-if="themeName == 'gazelle'">
      <div
        v-if="gazelleDictItem(0).dictLabel"
        :class="['upload-item py-4', gazelleRequiredErr(0)]"
      >
        <div class="py-2">
          <span v-show="gazelleRequiredDot(0)" class="text-red-500"> * </span>
          {{ gazelleDictItem(0).dictLabel }}
        </div>
        <SelfFileUpload
          :value="gazelleFileList0"
          :fileSize="40"
          :limit="30"
          :isShowTip="true"
          :fileType="[
            'doc',
            'xls',
            'ppt',
            'txt',
            'pdf',
            'jpg',
            'jpeg',
            'png',
            'rar',
            'zip',
          ]"
          @input="getUploadEncFile0"
        />
      </div>

      <div
        v-if="gazelleDictItem(10).dictLabel"
        :class="['upload-item py-4', gazelleRequiredErr(10)]"
      >
        <div class="py-2">
          <span v-show="gazelleRequiredDot(10)" class="text-red-500"> * </span>
          {{ gazelleDictItem(10).dictLabel }}
        </div>
        <SelfFileUpload
          :value="gazelleFileList10"
          :fileSize="40"
          :limit="30"
          :isShowTip="true"
          @input="getUploadEncFile10"
        />
      </div>

      <div
        v-if="gazelleDictItem(8).dictLabel"
        :class="['upload-item py-4', gazelleRequiredErr(8)]"
      >
        <div class="py-2">
          <span v-show="gazelleRequiredDot(8)" class="text-red-500"> * </span>
          {{ gazelleDictItem(8).dictLabel }}
        </div>
        <SelfFileUpload
          :value="gazelleFileList8"
          :fileSize="40"
          :limit="30"
          :isShowTip="true"
          @input="getUploadEncFile8"
        />
      </div>

      <!-- <div v-if="gazelleDictItem(9).dictLabel" :class="['upload-item py-4',gazelleRequiredErr(7)]">
        <div class="py-2">
          <span class="text-red-500"> * </span>
          {{ gazelleDictItem(9).dictLabel }}
        </div>
        <SelfFileUpload
          :value="gazelleFileList4"
          :fileSize="40"
          :limit="30"
          :isShowTip="true"
          @input="getUploadEncFile4"
        />
      </div> -->

      <div
        v-if="gazelleDictItem(4).dictLabel"
        :class="['upload-item py-4', gazelleRequiredErr(4)]"
      >
        <div class="py-2">
          <span v-show="gazelleRequiredDot(4)" class="text-red-500"> * </span>
          {{ gazelleDictItem(4).dictLabel }}
        </div>
        <SelfFileUpload
          :value="gazelleFileList4"
          :fileSize="40"
          :limit="30"
          :isShowTip="true"
          @input="getUploadEncFile4"
        />
      </div>

      <div
        v-if="gazelleDictItem(7).dictLabel"
        :class="['upload-item py-4', gazelleRequiredErr(7)]"
      >
        <div class="py-2">
          <span v-show="gazelleRequiredDot(7)" class="text-red-500"> * </span>
          {{ gazelleDictItem(7).dictLabel }}
        </div>
        <SelfFileUpload
          :value="gazelleFileList7"
          :fileSize="40"
          :limit="30"
          @input="getUploadEncFile7"
        />
      </div>

      <div
        v-if="gazelleDictItem(5).dictLabel"
        :class="['upload-item py-4', gazelleRequiredErr(5)]"
      >
        <div class="py-2">
          <span v-show="gazelleRequiredDot(5)" class="text-red-500"> * </span>
          {{ gazelleDictItem(5).dictLabel }}
          <span class="text-blue-500 alink cursor-pointer">
            <a :href="modelFile.url"> ( 点击下载模板文件 ) </a>
          </span>
        </div>
        <SelfFileUpload
          :value="gazelleFileList5"
          :fileSize="40"
          :limit="30"
          @input="getUploadEncFile5"
        />
      </div>

      <div
        v-if="gazelleDictItem(6).dictLabel"
        id="gazelle6"
        :class="['upload-item py-4', gazelleRequiredErr(6)]"
      >
        <div class="py-2">
          <span v-show="gazelleRequiredDot(6)" class="text-red-500"> * </span>
          <span>
            {{ gazelleDictItem(6).dictLabel }}
          </span>
        </div>
        <ImageUpload
          :value="gazelleFileList6"
          :limit="3"
          :fileSize="5"
          :isShowTip="true"
          @input="getUploadEncFile6"
        />
      </div>

      <div
        v-if="gazelleDictItem(11).dictLabel"
        :class="['upload-item py-4', gazelleRequiredErr(11)]"
      >
        <div class="py-2">
          <span v-show="gazelleRequiredDot(11)" class="text-red-500"> * </span>
          {{ gazelleDictItem(11).dictLabel }}
        </div>
        <SelfFileUpload
          :value="gazelleFileList11"
          :fileSize="40"
          :limit="30"
          @input="getUploadEncFil11"
        />
      </div>
    </div>

    <div class="flex justify-between py-10 text-center">
      <el-button
        v-if="isSubmit"
        class="confirm-btn"
        type="primary"
        size="medium"
        @click="submitForm"
      >
        保存
      </el-button>

      <!-- <DeclareNextItem /> -->
    </div>
  </div>
</template>

<script>
import SelfFileUpload from "@/views/components/SelfFileUpload";
import { uploadFileList, getFileList } from "@/api/declareForm/uploadFile";
export default {
  name: "EnclosureForm",
  props: {
    isSubmit: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    unicornRequiredDot() {
      return (unicornIndex) => {
        let findItem = this.unicornRequiredIndex.indexOf(
          parseInt(unicornIndex)
        );
        if (findItem !== -1) {
          return true;
        }
        return false;
      };
    },
    gazelleRequiredDot() {
      return (gazelleIndex) => {
        let findItem = this.gazelleRequiredIndex.indexOf(
          parseInt(gazelleIndex)
        );
        if (findItem !== -1) {
          return true;
        }
        return false;
      };
    },
    unicornRequiredErr() {
      return (unicornIndex) => {
        let indexs = this.unicronShow ? this.unicronShow.split(",") : [];
        let findItem = indexs.find(
          (item) => parseInt(item) === parseInt(unicornIndex)
        );
        return findItem ? "error-class" : "";
      };
    },
    gazelleRequiredErr() {
      return (gazelleIndex) => {
        let indexs = this.gazelleShow ? this.gazelleShow.split(",") : [];
        let findItem = indexs.find(
          (item) => parseInt(item) === parseInt(gazelleIndex)
        );
        return findItem ? "error-class" : "";
      };
    },
    dictItem() {
      return (type) => {
        let resArr = [];
        if (this.tList) {
          this.tList.forEach((item) => {
            if (item.dictValue == type) {
              resArr[0] = item;
            }
          });
          return resArr[0] ? resArr[0] : { dictLabel: false, dictValue: -1 };
        } else {
          return { dictLabel: false, dictValue: -1 };
        }
      };
    },
    gazelleDictItem() {
      return (type) => {
        let resArr = [];
        if (this.gazelleTList) {
          this.gazelleTList.forEach((item) => {
            if (item.dictValue == type) {
              resArr[0] = item;
            }
          });
          return resArr[0] ? resArr[0] : { dictLabel: false, dictValue: -1 };
        } else {
          return { dictLabel: false, dictValue: -1 };
        }
      };
    },

    addBaseApi() {
      return (url) => {
        return process.env.VUE_APP_BASE_API + url;
      };
    },
    themeName() {
      let typeId = this.$route.query.typeId;
      if (typeId == 0 || typeId == 1) {
        return "gazelle";
      }
      if (typeId == 2 || typeId == 3 || typeId == 4) {
        return "unicorn";
      }
      return "";
    },
  },
  components: {
    SelfFileUpload,
  },
  //  { name: item.name, url: item.url };
  data() {
    return {
      fileLoading: false,
      typeList: [
        {
          dictLabel: "01",
        },
      ],
      // 瞪羚
      gazelleFileTypeList: [],
      // 独角兽
      tList: [],
      gazelleTList: [],
      baseUrl: process.env.VUE_APP_BASE_API,

      modelFile: {
        name: "企业承诺书.docx",
        url: "http://jxdjs.thinkervc.cn/prod-api/file/1638345771836.docx",
      },
      unicornSortModalObj: {
        type: "",
        sort: 0,
      },
      // 独角兽 必填项
      unicornRequiredIndex: [0, 1, 2, 3, 4, 5, 6, 7],
      // 独角兽 哪些索引应该展示错误信息
      unicronShow: "",
      unicornSortList: [
        // { type: 0, sort: 0,fileList:[] },
        // { type: 1, sort: 0,fileList:[] },
        // { type: 2, sort: 0,fileList:[] },
        // { type: 3, sort: 0,fileList:[] },
        // { type: 4, sort: 0,fileList:[] },
        // { type: 5, sort: 0,fileList:[] },
        // { type: 6, sort: 0,fileList:[] },
        // { type: 7, sort: 0,fileList:[] },
      ],
      gazelleSortModalObj: {
        type: "",
        sort: 1,
      },

      // 瞪羚 必填项
      gazelleRequiredIndex: [0, 4, 10, 4, 5, 6, 7, 8, 11],
      // 瞪羚 哪些索引应该展示错误信息
      gazelleShow: "",
      gazelleSortList: [
        // { type: 0, sort: 1 },
        // { type: 10, sort: 1 },
        // { type: 8, sort: 1 },
        // { type: 9, sort: 1 },
        // { type: 4, sort: 1 },
        // { type: 5, sort: 1 },
        // { type: 6, sort: 1 },
        // { type: 7, sort: 1 }
      ],
      // gazelle:  [ 0,1,2,3,4,5,6,7,8 ]
      unicornFileList0: [],
      unicornFileList1: [],
      unicornFileList2: [],
      unicornFileList3: [],
      unicornFileList4: [],
      unicornFileList5: [],
      unicornFileList6: [],
      unicornFileList7: [],
      unicornFileList8: [],

      gazelleModalObj: {
        fileName: "",
        pathName: "",
        relationId: "",
        sort: 1,
        type: "",
      },
      unicornModalObj: {
        fileName: "",
        pathName: "",
        relationId: "",
        sort: 0,
        type: "",
      },
      // gazelle:  [ 0,4,10,4,5,6,7,8,11 ]
      gazelleFileList: ["", "", "", "", "", "", "", ""],
      gazelleFileList0: [],
      gazelleFileList4: [],
      // gazelleFileList3: [],
      gazelleFileList10: [],
      gazelleFileList5: [],
      gazelleFileList6: [],
      gazelleFileList7: [],
      gazelleFileList8: [],
      gazelleFileList11: [],

      relationId: "",
      formList: [],
    };
  },

  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.relationId = parseInt(to.query.id);
    });
  },
  async created() {
    this.initRelationId();
    // this.initFileTypeList()
    await this.initDictFileType();

    this.getFileListFun();
  },
  methods: {
    previewFile(url) {
      window.open("https://view.officeapps.live.com/op/view.aspx?src=" + url);
    },
    // init unicornSortList
    initUnicornSortList(list) {
      this.unicornSortList = [];
      list.forEach((item, index) => {
        let tempObj = JSON.parse(JSON.stringify(this.unicornSortModalObj));
        tempObj.type = item.dictValue;
        tempObj.name = item.dictLabel;
        this.unicornSortList[index] = tempObj;
      });
    },

    initGazelleSortList(list) {
      this.gazelleSortList = [];
      // console.log('initGazelleSortList');
      // console.log(list);
      list.forEach((item, index) => {
        let tempObj = JSON.parse(JSON.stringify(this.gazelleSortModalObj));
        tempObj.type = item.dictValue;
        tempObj.name = item.dictLabel;

        // this.gazelleSortList.push(tempObj);

        this.gazelleSortList[index] = tempObj;
        // console.log('init gazelleSortList');
        // console.log(this.gazelleSortList);
      });
    },
    initDictFileType() {
      this.getDicts("declare_accessory_type").then((res) => {
        if (res.code == 200) {
          let tempArr = JSON.parse(JSON.stringify(res.data));
          let tempTList = JSON.parse(JSON.stringify(this.tList));
          this.tList = [...tempArr, ...tempTList];
          this.initUnicornSortList(res.data);
        }
      });
      this.getDicts("declare_accessory_gazelle_type").then((res) => {
        if (res.code == 200) {
          // console.log(res);
          let tempArr = JSON.parse(JSON.stringify(res.data));
          let tempTList = JSON.parse(JSON.stringify(this.gazelleTList));
          this.gazelleTList = [...tempArr, ...tempTList];
          this.gazelleFileTypeList = res.data;
          this.initGazelleSortList(res.data);
        }
      });
    },
    manageGetList(allFileList) {
      let resArr = [];
      let id = this.$route.query.id;
      let that = this;

      allFileList.forEach((item, index) => {
        // 瞪羚企业申报表单
        if (item.sort && parseInt(item.sort) == 1) {
          let activeType = item.type;
          // let resIndex = that.findListIndex(
          //   "gazelleSortList",
          //   "type",
          //   activeType
          // );
          if (parseInt(activeType) === 11) {
            // console.log('source item === 11');
            // console.log(item);
          }
          let strName = "gazelleFileList" + activeType;
          // console.log(strName);
          // console.log(that[strName]);
          if (that[strName]) {
            // that[strName] = [];
            that[strName].push({
              name: item.fileName,
              url: item.pathName,
            });
          }
        }
        // 独角兽企业申报表单
        if (item.sort && parseInt(item.sort) == 0) {
          let activeType = item.type;
          let resIndex = that.findListIndex(
            "unicornSortList",
            "type",
            activeType
          );

          let strName = "unicornFileList" + activeType;
          if (that[strName]) {
            // that[strName] = [];
            that[strName].push({
              name: item.fileName,
              url: item.pathName,
            });
          }
        }
      });
    },
    /**
     * @function findListIndex
     * @param thisName    this 中 属性名称
     * @param findProp    匹配的属性名称
     * @param targetV     最终值
     * @return index      返回 目标 在数组中的索引
     */

    // 根据 this 中的属性名（必定是 gazelleSortList ,unicornSortList ）
    findListIndex(thisName, findProp, targetV) {
      let list = this[thisName];
      let resArr = [];
      let activeIndex = -1;
      if (list) {
        resArr = list.filter((item, index) => {
          if (item[findProp] == targetV) {
            activeIndex = index;
          }
          return item[findProp] != targetV;
        });
      }
      return activeIndex;
    },
    getFileListFun() {
      let id = this.$route.query.id;
      getFileList(id).then((res) => {
        if (res.code == 200) {
          if (res.data && res.data.length > 0) {
            this.manageGetList(res.data);
          }
        }
      });
    },

    initFileTypeList() {
      this.getDicts("").then((res) => {
        if (res.code == 200) {
          this.typeList = res.rows;
        }
      });
    },

    initRelationId() {
      let relationId = parseInt(this.$route.query.id);
      if (relationId || relationId == 0) {
        this.relationId = relationId;
      }
    },

    initThisFileProp(typeIndex, uploadRes, uploadResName) {
      let fileUrlList = uploadRes.split(",");
      let fileNameList = uploadResName.split(",");
      let fileArr = [];

      if (typeIndex === 11) {
        // console.log('typeIndex === 11');
        // console.log(uploadRes);
        // console.log(uploadResName);
      }

      fileUrlList.forEach((item, index) => {
        let temoObj = {};
        if (item) {
          temoObj["url"] = item;
          temoObj["name"] = fileNameList[index];

          fileArr[index] = temoObj;
        }
      });

      let listIndex = 0;

      if (this.themeName == "unicorn") {
        let findIndex = this.unicornSortList.findIndex(
          (unicornItem) => parseInt(unicornItem.type) === typeIndex
        );
        if (findIndex !== -1) {
          listIndex = findIndex;
        }
        if (!this.unicornSortList[listIndex]) {
          this.unicornSortList[listIndex] = {
            fileList: [],
            sort: 0,
            type: listIndex,
          };
        }
        this.unicornSortList[listIndex]["fileList"] = fileArr;
      }

      if (this.themeName == "gazelle") {
        let findIndex = this.gazelleSortList.findIndex(
          (gazelleItem) => parseInt(gazelleItem.type) === typeIndex
        );

        if (findIndex !== -1) {
          listIndex = findIndex;
        }

        if (!this.gazelleSortList[listIndex]) {
          this.gazelleSortList[listIndex] = {
            fileList: [],
            sort: 1,
            type: listIndex,
          };
        }
        this.gazelleSortList[listIndex]["fileList"] = fileArr;
      }
    },

    getUploadEncFile0(uploadRes, uploadResName) {
      this.initThisFileProp(0, uploadRes, uploadResName);
    },
    getUploadEncFile10(uploadRes, uploadResName) {
      this.initThisFileProp(10, uploadRes, uploadResName);
    },
    getUploadEncFile8(uploadRes, uploadResName) {
      this.initThisFileProp(8, uploadRes, uploadResName);
    },
    // getUploadEncFile4(uploadRes, uploadResName) {
    //   this.initThisFileProp(3, uploadRes, uploadResName);
    // },
    getUploadEncFile4(uploadRes, uploadResName) {
      this.initThisFileProp(4, uploadRes, uploadResName);
    },
    getUploadEncFile5(uploadRes, uploadResName) {
      this.initThisFileProp(5, uploadRes, uploadResName);
    },
    getUploadEncFile6(uploadRes, uploadResName) {
      this.initThisFileProp(6, uploadRes, uploadResName);
    },
    getUploadEncFile7(uploadRes, uploadResName) {
      this.initThisFileProp(7, uploadRes, uploadResName);
    },

    getUploadEncFil11(uploadRes, uploadResName) {
      this.initThisFileProp(11, uploadRes, uploadResName);
    },

    getUploadFile0(uploadRes, uploadResName, v) {
      // this.unicornFileList0 = v
      this.initThisFileProp(0, uploadRes, uploadResName);
    },
    getUploadFile1(uploadRes, uploadResName) {
      this.initThisFileProp(1, uploadRes, uploadResName);
    },
    getUploadFile2(uploadRes, uploadResName) {
      this.initThisFileProp(2, uploadRes, uploadResName);
    },
    getUploadFile3(uploadRes, uploadResName) {
      this.initThisFileProp(3, uploadRes, uploadResName);
    },
    getUploadFile4(uploadRes, uploadResName) {
      this.initThisFileProp(4, uploadRes, uploadResName);
    },
    getUploadFile5(uploadRes, uploadResName) {
      this.initThisFileProp(5, uploadRes, uploadResName);
    },
    getUploadFile6(uploadRes, uploadResName) {
      this.initThisFileProp(6, uploadRes, uploadResName);
    },
    getUploadFile7(uploadRes, uploadResName) {
      this.initThisFileProp(7, uploadRes, uploadResName);
    },
    // getUploadEncFile0(uploadRes) {
    //   let type = 0;
    //   this.gazelleFileList[0] = uploadRes;
    // },

    // getUploadEncFile10(uploadRes) {
    //   let type = 10;
    //   this.gazelleEnc2 = uploadRes;
    // },

    // getUploadEncFile8(uploadRes) {
    //   let type = 8;

    //   this.gazelleFileList[2] = uploadRes;
    // },

    // getUploadEncFile4(uploadRes) {
    //   let type = 9;

    //   this.gazelleFileList[3] = uploadRes;
    // },

    // getUploadEncFile4(uploadRes) {
    //   let type = 4;
    //   this.gazelleFileList[4] = uploadRes;
    // },

    // getUploadEncFile5(uploadRes) {
    //   let type = 5;
    //   this.gazelleFileList[5] = uploadRes;
    // },

    // getUploadEncFile7(uploadRes) {
    //   let type = 6;
    //   this.unicornEnc7 = uploadRes;

    //   let imgArr = uploadRes.split(",");
    // },

    // getUploadEncFile8(uploadRes) {
    //   let type = 7;
    //   this.unicornEnc8 = uploadRes;
    // },
    addTypeSort(list) {
      let tempList = JSON.parse(JSON.stringify(list));
      let resFileList = [];
      let that = this;

      tempList.forEach((item, index) => {
        if (item.fileList && item.fileList.length > 0) {
          let tempFileList = [];
          item.fileList.forEach((subItem) => {
            let tempObj = {};
            tempObj["type"] = item.type;
            tempObj["sort"] = item.sort;
            tempObj["fileName"] = subItem.name;
            tempObj["pathName"] = subItem.url;
            if (that.relationId) {
              tempObj["relationId"] = parseInt(that.relationId);
            }

            tempFileList.push(tempObj);
          });
          resFileList = resFileList.concat(tempFileList);
        }
      });
      return resFileList;
    },
    restFileList() {
      this.gazelleFileList0 = [];
      this.gazelleFileList10 = [];
      // this.gazelleFileList3 = [];
      this.gazelleFileList4 = [];
      this.gazelleFileList5 = [];
      this.gazelleFileList6 = [];
      this.gazelleFileList7 = [];
      this.gazelleFileList8 = [];
      this.gazelleFileList11 = [];

      this.unicornFileList0 = [];
      this.unicornFileList1 = [];
      this.unicornFileList2 = [];
      this.unicornFileList3 = [];
      this.unicornFileList4 = [];

      this.unicornFileList5 = [];
      this.unicornFileList6 = [];
      this.unicornFileList7 = [];
      this.getFileListFun();
    },
    //  独角兽附件上传 必填项校验
    validUnicorn() {
      this.unicronShow = "";
      let isValid = true;
      this.unicornSortList.forEach((item, index) => {
        let showArr = this.unicronShow.split(",");
        const noContent = !item.fileList || item.fileList.length <= 0;
        const contentType = parseInt(item.type);
        const isInRequired = this.unicornRequiredIndex.find(
          (requiredItem) => requiredItem === contentType
        );
        //

        if (noContent && (isInRequired || isInRequired === 0)) {
          isValid = false;
          if (
            !showArr.find(
              (showItem) => parseInt(showItem) != parseInt(contentType)
            )
          ) {
            showArr.push(contentType);
          }
          this.unicronShow = showArr.join(",");
        }
      });
      return isValid;
    },
    //  瞪羚附件上传 必填项校验
    validGazelle() {
      this.gazelleShow = "";
      let isValid = true;
      this.gazelleSortList.forEach((item, index) => {
        let showArr = this.gazelleShow.split(",");
        const noContent = !item.fileList || item.fileList.length <= 0;
        const contentType = parseInt(item.type);

        const isInRequired = this.gazelleRequiredIndex.find(
          (requiredItem) => requiredItem === contentType
        );

        if (noContent && (isInRequired || isInRequired === 0)) {
          isValid = false;
          if (
            !showArr.find(
              (showItem) => parseInt(showItem) != parseInt(contentType)
            )
          ) {
            showArr.push(contentType);
          }
          this.gazelleShow = showArr.join(",");
        }
      });
      return isValid;
    },
    submitForm() {
      return new Promise((resolve, reject) => {
        this.fileLoading = true;
        let fileValid = true;
        if (this.themeName === "unicorn") {
          fileValid = this.validUnicorn();
        }
        if (this.themeName === "gazelle") {
          fileValid = this.validGazelle();
        }

        // let unicornValid = this.validUnicorn();
        // let gazelleValid = this.validGazelle();
        if (!fileValid) {
          this.fileLoading = false;
          this.$message({
            type: "error",
            showClose: true,
            duration: 5000,
            message: "附件模块还有必填项未填，请填写完后再次尝试提交！",
          });
          return resolve(false);
        }

        let arr1 = this.addTypeSort(this.unicornSortList);
        let arr2 = this.addTypeSort(this.gazelleSortList);
        this.formList = arr1.concat(arr2);

        // let filterList = this.formList.filter(item => {
        //   return item.fileList;
        // });

        let resObj = {
          accessoryList: this.formList,
          relationId: parseInt(this.relationId),
        };
        if (this.formList.length <= 0) {
          resObj = { relationId: parseInt(this.relationId) };
        }
        uploadFileList(resObj)
          .then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "附件保存成功",
              });
              this.restFileList();
              resolve(true);
            }
          })
          .catch((error) => {
            resolve(false);
          })
          .finally(() => {
            this.fileLoading = false;
          });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.error-class {
  position: relative;
  &::after {
    content: "该项为必填项";
    position: absolute;
    bottom: -1rem;
    left: 0;
    display: block;
    width: 100%;
    font-size: 0.8rem;
    color: red;
    border-top: 1px solid red;
  }
}
</style>
